import './TestCondition.scss'
import { useEffect, useState } from 'react';
import { localGetTestListAPI, localGetLearnConditionAPI } from '@/apis/student';
import StudentConditionShow from './components/StudentConditionShow/StudentConditionShow';
import { fetchGetCourseCondition, fetchGetPartList } from '@/store/modules/teacher';
import { useDispatch, useSelector } from 'react-redux';


export default function TestCondition() {
    const dispatch = useDispatch();
    const { user_status } = useSelector(state => state.user);
    const { partList, courseCondition } = useSelector(state =>state.teacher);

    useEffect(() => {
        async function getTestData() {

            await dispatch(fetchGetPartList(user_status.class_id,user_status.token));
            // const res = await localGetTestListAPI();
            
        }

        async function getAdvice() {
            await dispatch(fetchGetCourseCondition(user_status.class_id,user_status.token));
            
        }

        getTestData();
        getAdvice();
    }, [])


    return (
        <div className='TestCondition'>
            <h1>学习情况</h1>
            <section className='learn-condition'>
                <ul>
                    {partList.length === 0 || partList.map(ele =>
                        <li key={ele.id}>
                            <span>第{ele.partid}章测试</span>
                            <span>{`(总分：${ele.total_points})`}</span>
                            <span>
                                { `平均分：${ele.avr_score}`}
                            </span>
                        </li>
                    )}
                </ul>
                <StudentConditionShow testData={partList} />
            </section>
            <h1>规划建议</h1>
            {Object.keys(courseCondition).length === 0 || (<section className='advice'>
                <p className='short-comings'>{courseCondition.class_situation}</p>
                <br />
                <p className='advice'>{courseCondition.class_suggestion}</p>
            </section>)}
        </div>
    )
}